<template>
	<view class="content">
		<view class="top">
			<view class="top_item">
				<view class="circle active">
					<image class="img" src="/static/shimingbai.png" lazy-load="false"></image>
				</view>
				<text class="top_item_text active">实名申请</text>
			</view>
			<view class="top_item">
				<view class="circle active">
					<image class="img" style="margin-left: 8rpx" src="/static/tianxiebai.png" lazy-load="false"></image>
				</view>
				<text class="top_item_text active">填写借款资料</text>
			</view>
			<view class="top_item">
				<view class="circle">
					<image class="img" src="/static/fangkuanhui.png" lazy-load="false"></image>
				</view>
				<text class="top_item_text">审核放款</text>
			</view>
		</view>
		<view class="p-24">
			<view class="title">
				<text class="">*</text>
				<view class="title_dec">资产信息</view>
			</view>
			<view class="list">
				<view class="list_item" v-for="(item, index) in list" :key="index">
					<view class="lable">{{ item.label.key }}</view>
					<view class="item_btn">
						<text :class="{ active: items.flag }" v-for="(items, indexs) in item.value" :key="indexs" @click="handleItem(index, indexs)">{{ items.key }}</text>
					</view>
				</view>
			</view>
			<view class="agreement_flex">
				<u-checkbox v-model="checked" size="28" label-size="26rpx">已经阅读并同意</u-checkbox>
				<text @click="openAgrment">《贷款知情书》</text>
			</view>
			<view class="divider"></view>
			<view class="btn" v-if="isActive" @click="openView">立即提交下款审核</view>
			<view class="btn2" v-else>立即提交下款审核</view>
		</view>
		<u-popup v-model="showDow" :mask-close-able="false" mode="center" border-radius="16" width="532rpx" height="300rpx">
			<view class="dow_box">
				<view style="height: 60rpx"></view>
				<!-- <u-line-progress active-color="#3478F2" :percent="count" striped-active></u-line-progress> -->
				<u-slider v-model="count" min="0" max="100" height="16" :use-slot="true">
					<view class="badge-button">{{ count }}%</view>
				</u-slider>
				<view style="font-size: 32rpx; font-family: PingFang SC; font-weight: 400; color: #151515; margin-top: 40rpx">正在提交...</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import ajax from '@/api'
export default {
	data() {
		return {
			timer: null,
			count: 10,
			showDow: false,
			numList: [
				{
					name: '实名申请'
				},
				{
					name: '填写借款资料'
				},
				{
					name: '审核放款'
				}
			],
			list: [
				{
					label: { key: '芝麻分', value: '1' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '600分以下', value: '2', flag: false },
						{ key: '600~650分', value: '3', flag: false },
						{ key: '650~700分', value: '4', flag: false },
						{ key: '700分以上', value: '5', flag: false }
					]
				},
				{
					label: { key: '社保缴纳', value: '2' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '未满6个月', value: '2', flag: false },
						{ key: '6个月以上', value: '3', flag: false }
					]
				},
				{
					label: { key: '公积金缴纳', value: '3' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '未满6个月', value: '2', flag: false },
						{ key: '6个月以上', value: '3', flag: false }
					]
				},
				{
					label: { key: '房产情况', value: '4' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '有房不抵押', value: '2', flag: false },
						{ key: '有房可抵押', value: '3', flag: false }
					]
				},
				{
					label: { key: '车辆情况', value: '5' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '有车不抵押', value: '2', flag: false },
						{ key: '有车可抵押', value: '3', flag: false }
					]
				},
				{
					label: { key: '保险保单', value: '6' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '缴纳未满1年', value: '2', flag: false },
						{ key: '缴纳1年以上', value: '3', flag: false }
					]
				},
				{
					label: { key: '信用卡', value: '7' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '有', value: '2', flag: false }
					]
				},
				{
					label: { key: '京东白条', value: '8' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '5000元以下', value: '2', flag: false },
						{ key: '5000元以上', value: '2', flag: false }
						// { key: '1万~3万', value: '2', flag: false },
						// { key: '3万以上', value: '2', flag: false }
					]
				},
				{
					label: { key: '花呗', value: '9' },
					value: [
						{ key: '无', value: '1', flag: false },
						{ key: '5000元以下', value: '2', flag: false },
						{ key: '5000元以上', value: '2', flag: false }
						// { key: '1万~3万', value: '2', flag: false },
						// { key: '3万以上', value: '2', flag: false }
					]
				}
			],
			checked: true,
			checked2: true,
			tep: location.href.split('/')[3]
		}
	},
	computed: {
		isActive() {
			let bool = []
			this.list.forEach((item) => {
				item.value.forEach((v) => {
					if (v.flag) {
						bool.push(v)
					}
				})
			})
			return bool.length == this.list.length
		}
	},
	onShow() {},
	onUnload() {
		this.timer = null
	},
	methods: {
		openAgrment() {
			// #ifdef H5
			let name = this.tep == 'xxl' ? 'book' : 'book1'
			location.href = `https://website.zd-dqd.com/dqdxy/#/pages/agreement/${name}`
			// #endif
		},
		// sesame\room\social\gjj\car\policy\credit_card\baitiao\huabei

		getParams(key) {
			const data = key.value.filter((item) => item.flag == true)
			if (data.length) {
				return data[0].value
			}
			return ''
		},
		async progressbar() {
			let params = {
				sesame: this.getParams(this.list[0]),
				room: this.getParams(this.list[1]),
				social: this.getParams(this.list[2]),
				gjj: this.getParams(this.list[3]),
				car: this.getParams(this.list[4]),
				policy: this.getParams(this.list[5]),
				credit_card: this.getParams(this.list[6]),
				baitiao: this.getParams(this.list[7]),
				huabei: this.getParams(this.list[8]),
				channel: uni.getStorageSync('id') || 3
			}
			let data = await ajax.assets(params)
			uni.setStorageSync('product', JSON.stringify(data))
			this.showDow = true
			this.count = 0
			this.timer = setInterval(async () => {
				this.count = this.count + Math.floor(Math.random() * 15 + 5)
				if (this.count > 100) {
					clearInterval(this.timer)
					this.showDow = false
					if (this.tep != 'xxl' && data.next_step == 1) {
						uni.reLaunch({
							url: `/pages/extension/index`
						})
					} else {
						if (this.tep == 'xxl' && data?.row?.length) {
							let ids = data.row.map((item) => item.identification).join(',')
							await ajax.apply({ identification: ids, channel: uni.getStorageSync('id') || 3 })
						}
						uni.reLaunch({
							url: `/pages/succee/succee`
						})
					}
				}
			}, 80)
		},
		openView() {
			this.progressbar()
		},
		handleItem(index, indexs) {
			this.list.forEach((item, itemIndex) => {
				if (itemIndex == index) {
					this.list[index].value.forEach((v) => {
						v.flag = false
						this.list[index].value[indexs].flag = true
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
.top_item_text {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
	margin-top: 8rpx;
}
.top_item_text.active {
	color: #3478f2;
}
.img {
	width: 60rpx;
	height: 60rpx;
}
.circle {
	width: 88rpx;
	height: 88rpx;
	border-radius: 100%;
	background: #e4e4e4;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.circle.active {
	background: #3478f2;
}
.circle::after {
	position: absolute;
	content: '';
	width: 200rpx;
	height: 8rpx;
	background: #d9d9d9;
	top: 50%;
	left: 87rpx;
}
.circle.active::after {
	background: #3478f2;
}
.top_item:last-child .circle::after {
	height: 0rpx;
}
.badge-button {
	width: 60rpx;
	height: 32rpx;
	background: #3478f2;
	line-height: 32rpx;
	text-align: center;
	font-size: 16rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	border-radius: 16rpx;
}
.list {
	padding-left: 20rpx;
	margin-top: 28rpx;
}
.list_item {
	display: flex;
	align-items: flex-start;
	.lable {
		width: 150rpx;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #969799;
	}
	.item_btn {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
	}
}
.item_btn text {
	width: 30%;
	height: 60rpx;
	line-height: 58rpx;
	text-align: center;
	border-radius: 30rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	border: 2rpx solid #bdbdbd;
	color: #969799;
	margin-right: 16rpx;
	margin-bottom: 36rpx;
}
.item_btn text.active {
	background: #eef4fe;
	border: 2px solid #3478f2;
	color: #3478f2;
}
.agreement_flex {
	margin-top: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin-left: -20rpx;
	}
}
.agreement_bten {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3478f2;
	text-align: center;
}
.divider {
	width: 702rpx;
	height: 2rpx;
	background: #e4e4e4;
	margin: 20rpx auto;
}
.agreement_content {
	padding: 10rpx 24rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 56rpx;
	color: #151515;
}
.agreement_title {
	font-size: 40rpx;
	margin-top: 50rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-align: center;
	color: #333333;
}
.agreement_dec {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	margin-top: 40rpx;
	text-align: center;
	color: #333333;
}
.dow_box {
	padding: 38rpx;
	text-align: center;
	.dow_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.deposit_btn {
		width: 372rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #3478f2;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin: 44rpx auto;
	}
	.edit_btn {
		width: 372rpx;
		height: 72rpx;
		background: #ffffff;
		border: 2rpx solid #3478f2;
		border-radius: 36rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin: 0 auto;
		line-height: 72rpx;
	}
	.dec {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
}
.title {
	margin-left: 12rpx;
	display: flex;
	align-items: flex-start;
	text {
		color: red;
	}
}
.title_dec {
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	position: relative;
}
.title_dec::after {
	position: absolute;
	content: '';
	width: 38rpx;
	height: 4rpx;
	background: #3478f2;
	left: 0;
	bottom: -6rpx;
}
.gou {
	width: 750rpx;
	height: 64rpx;
	background: #e4eeff;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	line-height: 64rpx;
	text-align: center;
}
.btn {
	width: 652rpx;
	height: 88rpx;
	background: #3478f2;
	line-height: 88rpx;
	border-radius: 44rpx;
	margin: 38rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.btn2 {
	width: 652rpx;
	height: 88rpx;
	background: #cccccc;
	line-height: 88rpx;
	border-radius: 44rpx;
	margin: 38rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.top {
	padding: 0 52rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 750rpx;
	height: 180rpx;
	background: #ffffff;
	border-radius: 0px;
}
.p-24 {
	padding: 24rpx;
	background-color: #fff;
}
</style>
